<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
  <meta name="keywords" content="addMapRestriction" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <title>HERE Maps API Example: Restricting the Map</title>
   <!-- Set up constants such as APP ID and token -->
  <script type="text/javascript" src="../libs/hereAppIdAndToken.js"></script>
  <!-- Bootstrap jQuery Library -->
  <script type="text/javascript" src="../libs/jQl.min.js"></script>
  
  <!-- Asynchronously the HERE Maps API for JavaScript -->
  <script type="text/javascript" src="../libs/hereAsyncLoader.js" 
    id="HereMapsLoaderScript" 
    data-map-container="mapContainer" 
    data-params="maps" 
    data-callback="addMapRestriction" 
    data-libs="restrict-map-control"
    data-parent="demos/restrict-map-component/">
  </script> 
  <link rel="icon" href="http://here.com/favicon.ico"/>
  <!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
 </head>
 <body>
   <h1>Restricting the Map to a specified area</h1>
   <p>This example adds a custom component, which restricts the display to a set area, the center
     of the map is unable to leave the area specified by the bounding box. </p>
  <div id="mapContainer" style="width:540px; height:334px;" ></div>
  <div id="src">
    <br/>
      <p>The control can be loaded using the following <code>&lt;script&gt;</code> element:
      <pre><code class='prettyprint'>&lt;script type="text/javascript" charset="UTF-8" src="<a href="libs/restrict-map-control.js">libs/restrict-map-control.js</a>"&gt;&lt;/script></code></pre>
    <p>Code:</p>
  </div>
 </body>
<script id="example-code" data-categories="map,library" type="text/javascript">
//<![CDATA[
function addOutline(map) {
  // Set of initial geo coordinates to create the purple polyline
  var points = [
      new nokia.maps.geo.Coordinate(47.4136, 5.9845),
      new nokia.maps.geo.Coordinate(47.4136, 14.3671),
      new nokia.maps.geo.Coordinate(54.8073, 14.3671),
      new nokia.maps.geo.Coordinate(54.8073, 5.9845),
      new nokia.maps.geo.Coordinate(47.4136, 5.9845)
    ];

  // Transparent purple polyline
  map.objects.add(new nokia.maps.map.Polyline(
    points,
    {
      pen: {
        strokeColor: "#22CA",
        lineWidth: 5
      }
    }
  ));
}

function addMapRestriction(map) {
  map.set("zoomLevel", 5);
  addOutline(map);

  var bounds = new nokia.maps.geo.BoundingBox(
    new nokia.maps.geo.Coordinate(54.8073, 5.9845),
    new nokia.maps.geo.Coordinate(47.4136, 14.3671)
  ),
    restrictControl = new RestrictMap(5, 10, bounds);

  map.components.add(restrictControl);
}

//]]>
</script>
<script type="text/javascript" src="../libs/prettyprint.js"></script> 
</html>
